<template>
  <div>
    <!-- 顶部搜索条 -->
    <van-sticky>
      <van-search
        v-model="value"
        shape="round"
        background="#939699"
        placeholder="请输入搜索关键词"
      />
    </van-sticky>

    <!-- 消息提示栏 -->
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false">
        <van-swipe-item>内容 1</van-swipe-item>
        <van-swipe-item>内容 2</van-swipe-item>
        <van-swipe-item>内容 3</van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <!-- 首页轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#939699">
      <van-swipe-item>
        <img src="@/assets/index1.jpg" alt="" width="100%" height="100%">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/index1.jpg" alt="" width="100%" height="100%">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/index1.jpg" alt="" width="100%" height="100%">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/index1.jpg" alt="" width="100%" height="100%">
      </van-swipe-item>
    </van-swipe>
    
    <!-- 宫格导航栏 -->
    <van-grid :column-num="3">
      <van-grid-item  icon="card" text="账户资产" />
      <van-grid-item  icon="shop" text="店铺" />
      <van-grid-item  icon="gift" text="幸福家园" />
      <van-grid-item  icon="bookmark" text="组织" />
      <van-grid-item  icon="live" text="小课堂" />
      <van-grid-item  icon="shop-collect" text="爱心房" />
    </van-grid>

    <!-- 活动列表 -->
    <!-- 分割线 -->
    <van-divider 
      content-position="left"
      :style="{ color: '#939699', borderColor: '#939699', padding: '0 16px' }"
    >活动</van-divider>
    <!-- 列表 -->
    <van-pull-refresh v-model="refreshing">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        
      >
        <van-cell >
          <div class="list">
            <div class="left">
              <img src="../../assets/index1.jpg" alt="">
              <p>标题</p>
            </div>
            <div class="right">
              <img src="../../assets/index1.jpg" alt="">
              <p>标题</p>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 顶部搜索条
        value:'',
        // 活动列表
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
      }
    },

    methods: {
      
    },

    mounted () {
      ;
    },
  }
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #39a9ed;
  font-size: 20px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.list{
  display: flex;
  margin: 5px;
  justify-content: space-between;
  .left{
    width: 47%;
    border: 1px solid wheat;
    border-radius: 10px;
    img{
      width: 100%;
    }
    p{
      font-size: 17px;
    }
  }
  .right{
    width: 47%;
    border: 1px solid wheat;
    border-radius: 10px;
    img{
      width: 100%;
    }
    p{
      font-size: 17px;
    }
  }
}
</style>